<!--发布任务/views/task/Detail.vue-->
<template>
  <div class="container">
    <tContent title="任务详情">
      <template slot="pannelContent">
         <van-skeleton title :row="3" :loading="loading">
            <sTaskDetail :filterOrderDetail = filterOrderDetail />
         </van-skeleton>
      </template>
      <template slot="otherContent">
        <van-button
          class="largeBtn"
          v-if="isManager && lsStatus !== '2'"
          type="primary"
          block
          :to="{ path: '/publishTask/' + lsStatus }"
          >重新发布</van-button
        >
        <van-row class="btnBox" v-if="isManager && lsStatus === '2'">
          <van-col span="12">
            <van-button class="normalBtn1" type="default" @click="notPass"
              >审核不通过</van-button
            ></van-col
          >
          <van-col span="12">
            <van-button @click="pass" class="normalBtn2" type="primary"
              >审核通过</van-button
            ></van-col
          >
        </van-row>
        <van-row class="btnBox" v-if="isWorker && lsStatus === '0'">
          <van-col span="12">
            <van-button :disabled = '!filterOrderDetail' class="normalBtn1" type="default" @click="refuseOrder"
              >拒绝接单</van-button
            >
          </van-col>
          <van-col span="12">
            <van-button :disabled = '!filterOrderDetail'  @click="takeOrder" class="normalBtn2" type="primary"
              >确定接单</van-button
            >
          </van-col>
        </van-row>
            <van-row class="btnBox" v-if="isWorker && lsStatus === '1'">
          <van-col span="12">
            <van-button class="normalBtn1" type="default" @click="returnOrder"
              >退还该单</van-button
            >
          </van-col>
          <van-col span="12">
            <van-button :to="{path:'/upload/' + workOrderId}" class="normalBtn2" type="primary"
              >上传资料</van-button
            >
          </van-col>
        </van-row>
      </template>
    </tContent>
    <van-dialog
      v-model="show"
      native-type="submit"
      @confirm="confirmReason"
      @cancel="cancelReason"
      title="原因"
      show-cancel-button
    >
      <van-field
        v-model="reason"
        rows="2"
        autosize
        label=""
        type="textarea"
        maxlength="50"
        placeholder="请输入原因"
        show-word-limit
      />
    </van-dialog>
  </div>
</template>
<script>
import sTaskDetail from '@/components/sTaskDetail.vue'
import tContent from '@/components/templete/content.vue'
import { Toast, Dialog } from 'vant'
import {mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      lsStatus: '',
      show: false,
      reason: '',
      received: false,
      loading:true
    }
  },
  components: {
    sTaskDetail,
    tContent
  },
  computed: {
    ...mapState(['orderDetail']),
    ...mapGetters(['isManager', 'isWorker']),
    filterOrderDetail() {
      const id = this.$route.params.workOrderId
      let val = this.orderDetail.filter(item => item.workOrderId === id)
      if (val && val.length) {
        return val[0]
      } else {
        return false
      }
    },
    workOrderId(){
      return this.$route.params.workOrderId
    }
  },
  methods: {
    notPass() {
      this.show = true
    },
    confirmReason(action, done) {
      if (this.reason === '') {
        Toast('原因不能为空')
      } else {
        this.$router.go(-1)
      }
    },
    cancelReason() {
      this.reason = ''
    },
    pass() {
      Dialog.confirm({
        title: '提示',
        message: '确定通过审核？'
      })
        .then(() => {
          this.$router.go(-1)
        })
        .catch(err => {})
    },
    refuseOrder() {
      Dialog.confirm({
        title: '提示',
        message: '确定拒绝该订单？'
      })
        .then(() => {
          //请求接口
          this.$router.push('/result/reject')
        })
        .catch(err => {})
    },
    takeOrder() {
      Dialog.confirm({
        title: '提示',
        message: '确定接单？'
      })
        .then(() => {
           this.lsStatus = '1'
        })
        .catch(err => {})
    },
    returnOrder() {
      Dialog.confirm({
        title: '提示',
        message: '确定退还该订单？'
      })
        .then(() => {
          //请求接口
          this.$router.push('/result/return')
        })
        .catch(err => {})
    }
  },
  mounted() {
    this.lsStatus = this.$route.params.lsStatus
    this.$store.dispatch('getOrderDetail', this.lsStatus)
    this.loading = false
  }
}
</script>
<style lang="less" scoped>
.largeBtn {
  margin-left: 16px;
  width: calc(100% - 32px);
}
.normalBtn1,
.normalBtn2 {
  margin-left: 16px;
  width: calc(100% - 24px);
}
.normalBtn2 {
  margin-left: 8px;
}
</style>
